<template>
  <!--监测手机号任务 -->
  <div class="app-container">
    <div v-loading="loading">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        class="search-form-new"
        label-width="auto"
      >
        <el-form-item label="监控类型" prop="type">
          <el-select v-model="queryParams.type">
            <el-option
              :label="item.label"
              :value="key"
              v-for="(item, key) in taskTypeOptions"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监控名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="检查间隔" prop="intervalDays">
          <el-select
            v-model="queryParams.intervalDays"
            v-if="queryParams.type != 2"
          >
            <el-option
              :label="item.label"
              :value="key"
              v-for="(item, key) in days1"
              :key="key"
            ></el-option>
          </el-select>
          <el-select
            v-model="queryParams.intervalDays"
            v-if="queryParams.type == 2"
          >
            <el-option
              :label="item.label"
              :value="key"
              v-for="(item, key) in days2"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="state">
          <el-select
            v-model="queryParams.state"
            placeholder="请选择"
            size="small"
            clearable
            @change="search"
          >
            <el-option
              v-for="(dict, i) in enabledOptions"
              :key="i"
              :label="dict.name"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" type="warning" @click="resetQuery"
            >重置</el-button
          >
          <el-button icon="el-icon-plus" type="success" @click="addACount"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table :data="tableData.records" style="width: 100%">
          <el-table-column label="监控ID" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="监控名称" prop="name" />
          <el-table-column label="检查间隔" prop="intervalDays">
            <template slot-scope="scope">
              <el-tag :type="days1[scope.row.intervalDays].type">{{
                days1[scope.row.intervalDays].label
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="监控类型" prop="type">
            <template slot-scope="scope">
              <el-tag :type="taskTypeOptions[scope.row.type].type">{{
                taskTypeOptions[scope.row.type].label
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="新增监控时间" prop="createTime" width="166" />
          <el-table-column label="供应商" prop="createName" width="126" />
          <el-table-column label="备注" prop="remark" />
          <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              <el-switch
                @change="changeAbled($event, scope.row.id)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.state"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openGoods(scope.row)"
                >关联商品</el-button
              >
              <el-button
                type="edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['jiankong:editgroup']"
                >编辑</el-button
              >
              <el-button
                type="del"
                @click="delItem(scope.row)"
                v-hasPermi="['jiankong:delgroup']"
                >删除</el-button
              >
              <!-- <el-button type="text" size="mini" @click="queryItem(scope.row)"
                >查询</el-button
              > -->
              <!-- <el-button type="text" size="mini" @click="queryRecords(scope.row)"
                >查询记录</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="tableData.total > 0"
          :total="tableData.total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
  </div>
</template>

<script>
import addDialog from "./addGroup.vue";
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
import shengyu from "@/components/yudu/shengyu.vue";
export default {
  name: "checkPhone",
  components: { addDialog, shengyu },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      enabledOptions: [
        {
          name: "启用",
          value: "1",
        },
        {
          name: "停用",
          value: "0",
        },
      ],
      taskTypeOptions:
      {
        1: {
          label: "掉绑监控",
          value: "1",
          type: 'success'
        },
        2: {
          label: "转手监控",
          value: "2",
          type: 'danger'
        }
      },
      days1: {
        1: {
          label: '1天',
          value: 1,
          type: ''
        },
        2: {
          label: '2天',
          value: 2,
          type: 'warning'
        },
        3: {
          label: '3天',
          value: 3,
          type: 'success'
        },
        5: {
          label: '5天',
          value: 5,
          type: 'success'
        },
        7: {
          label: '7天',
          value: 7,
          type: 'warning'
        },
        15: {
          label: '15天',
          value: 15,
          type: 'dnager'
        },
        30: {
          label: '30天',
          value: 30,
          type: 'dnager'
        },
      },
      days2: {
        3: {
          label: '3天',
          value: 3,
          type: 'warning'
        },
        5: {
          label: '5天',
          value: 5,
          type: 'success'
        },
        7: {
          label: '7天',
          value: 7,
          type: 'dnager'
        },
        15: {
          label: '15天',
          value: 15,
          type: 'success'
        },
        30: {
          label: '30天',
          value: 30,
          type: ''
        },
        45: {
          label: '45天',
          value: 45,
          type: ''
        },
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        tpye: '',
        name: '',
        intervalDays: '',
        state: ''
      },
      // shengyu:0
    };
  },
  created() {
    this.getList();
    // this.residueNumber()
  },
  methods: {
    // 自动获取剩余次数
    // residueNumber(){
    //   infoApi.residueNumber().then(res=>{
    //     this.shengyu = res.data
    //   })
    // },
    // 获取列表
    getList() {
      this.tableData.records = [];
      this.loading = true;
      this.$nextTick(() => {
        checkPhoneApi
          .monitorTaskList(this.queryParams)
          .then((response) => {
            this.loading = false;
            this.tableData.records = response.rows;
            this.tableData.total = response.total;
          })
          .catch((err) => {
            this.loading = false;
          });
      });
    },
    // 启用状态改变
    changeAbled(e, id) {
      checkPhoneApi
        .editMonitorTask({ id: id, state: e })
        .then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getList();
        })
        .catch((err) => {
          this.getList();
        });
    },
    // 搜索
    search() {
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams = {};
      this.getList();
    },
    // 新增
    addACount() {
      this.$refs.addDialog.open("add");
    },
    // 到关联商品
    openGoods(row) {
      this.$router.push("/jiankongfloder/jiankongshangpin/goods/" + row.id);
      // this.$router.push({
      //   path:'/tenantUtils/jiankongfloder/jiankongshangpin',
      //   query:{
      //     taskId:row.id
      //   }
      // })
    },
    // 编辑
    handleUpdate(row) {
      // 查看详情
      this.$refs.addDialog.open("edit", row);
    },
    // 查询记录弹窗打开
    queryRecords(row) {
      this.$refs.recordsDialog.open(row.id);
    },
    //查询结果
    queryItem(row) {
      this.loading = true;
      checkPhoneApi.query(row.id).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.$alert(
            `当前账号状态${res.data.status == "0"
              ? "正常"
              : res.data.status == "1"
                ? "被找回"
                : res.data.status == "2"
                  ? "二变无"
                  : res.data.status == "3"
                    ? "今日上限"
                    : "账号错误"
            }，详细任务信息请点击“查询记录”查看`
          );
        }
        /**
         * <span v-show="scope.row.status=='0'" style="color: aqua;">正常</span>
                 <span v-show="scope.row.status=='1'" style="color: red;">被找回</span>
                 <span v-show="scope.row.status=='2'" style="color: orange;">二变无</span>
                 <span v-show="scope.row.status=='3'">今日上限</span>
                 <span v-show="scope.row.status=='4'" style="color: red;">账号错误</span>
         */
      });
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          checkPhoneApi.delMonitorTask(row.id).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          });
        })
        .catch(() => { });
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
